<template>
  <div>
    <van-nav-bar
  title="文档详情"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
    <div class="health-education-page">
      <div v-for="(doc, index) in documents" :key="index" class="document-item">
        <h3>{{ doc.title }}</h3>
        <p>{{ doc.content }}</p>
        <div class="images">
          <img v-for="(img, imgIndex) in doc.images" :key="imgIndex" :src="img" style="width: 100px;" alt="Image">
        </div>
        <span :class="['read-status', { 'unread': !doc.readStatus }]">{{ doc.readStatus ? '已读' : '未读' }}</span>
        <button @click="navigateToDetail(index)">查看详情</button>
      </div>
    </div>
  </div>
  <van-tabbar v-model="active">
    <!-- 底部导航保持不变 -->
    <van-tabbar-item icon="home-o" :to="'/HomePage'">首页</van-tabbar-item>
  <van-tabbar-item icon="column" :to="'/Health'">科普</van-tabbar-item>
  <van-tabbar-item icon="description" :to="'/messages'">消息</van-tabbar-item>
  <van-tabbar-item icon="contact" :to="'/Setup'">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script lang="ts" setup>
 const active = ref(1);

onMounted(() => {
  active
 // onClickRight()
})
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
const onClickLeft = () => history.back();
interface DocumentItem {
  title: string;
  content: string;
  images: string[];
  readStatus: boolean;
}

const documents = ref<DocumentItem[]>([]);
const router = useRouter();

onMounted(() => {
  const savedDocuments = localStorage.getItem('documents');
  if (savedDocuments) {
    documents.value = JSON.parse(savedDocuments);
  } else {
    documents.value = [
      {
        title: '内容标题1',
        content: '文章正文这是一篇很好的报告...',
        images: [
          'https://ts1.tc.mm.bing.net/th/id/OIP-C.dpI6mve42u1gc9MYzgbzggHaHa?w=161&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
          'https://ts1.tc.mm.bing.net/th/id/OIP-C.ieal3Lu_ONva14nSLY72BAHaKd?w=160&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
          'https://ts1.tc.mm.bing.net/th/id/OIP-C.ntSAQdMztq411rw_FNnwygHaKd?w=160&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
        ],
        readStatus: false,
      },
      {
        title: '内容标题2',
        content: '文章正文...',
        images: [
          'https://tse1-mm.cn.bing.net/th/id/OIP-C.fdMAJBbg9ClZYPt7BkAZDwHaHa?w=186&h=186&c=7&r=0&o=7&cb=iwp1&dpr=1.3&pid=1.7&rm=3',
          'https://tse1-mm.cn.bing.net/th/id/OIP-C.5a32r8_RC7-LPkYEmPdIuAHaHa?w=186&h=186&c=7&r=0&o=7&cb=iwp1&dpr=1.3&pid=1.7&rm=3',
          'https://tse1-mm.cn.bing.net/th/id/OIP-C.aqcokl_lH2dNvSztVT2KgAHaHa?w=186&h=186&c=7&r=0&o=7&cb=iwp1&dpr=1.3&pid=1.7&rm=3',
        ],
        readStatus: false,
      },
      // 更多文档...
    ];
  }
});

const navigateToDetail = (index: number) => {
  // 更新读取状态为已读
  documents.value[index].readStatus = true;
  // 保存更新后的文档状态到 localStorage
  localStorage.setItem('documents', JSON.stringify(documents.value));
  // 跳转到详情页面，并传递文档对象
  router.push({ name: 'DocumentDetail', query: { document: JSON.stringify(documents.value[index]) } });
};
</script>

<style scoped>
.read-status {
  color: orange;
}
.read-status.unread {
  color: red;
}
</style>